<template>
    <view class="content wdh-100 columnbox">
        <template v-if="step==1">
            <view class="columnbox top-box">
                <view class="wdh-100 b-title">距离找回车辆 <text>仅剩一步</text> </view>
                <view class="rowbox wdh-100 jus">
                    <view class="rowbox one-s-box">
                        <view class="rowbox">1</view>
                        实名认证
                    </view>
                    <view class="rowbox one-s-box grey-box">
                        <view class="rowbox">2</view>
                        输入车辆信息
                    </view>
                </view>
            </view>
            <view class="columnbox n-box">
                <view class="wdh-100 rowbox spb one-info">
                    <view>姓名</view>
                    <input placeholder="请输入" />
                </view>
                <view class="wdh-100 rowbox spb one-info">
                    <view>证件号</view>
                    <input placeholder="请输入" />
                </view>
                <view class="wdh-100 rowbox spb scan-box">
                    <view class="rowbox">
                        <u-icon name="scan" size="40rpx"></u-icon>
                        扫描身份证自动识别
                    </view>
                    <view class="rowbox">
                        去扫描 <u-icon name="arrow-right" size="28rpx"></u-icon>
                    </view>
                </view>
            </view>
            <view class="wdh-100" style="height: 200rpx;"></view>
            <view class="rowbox bottom-box">
                <view class="rowbox pay-btn" @click="step=2">下一步</view>
            </view>
        </template>
        <template v-else>
            <view class="columnbox top-box">
                <view class="wdh-100 b-title">提交成功即可完成 <text>找回车牌</text> </view>
                <view class="rowbox wdh-100 jus">
                    <view class="rowbox one-s-box">
                        <view class="rowbox">1</view>
                        实名认证
                    </view>
                    <view class="rowbox one-s-box">
                        <view class="rowbox">2</view>
                        输入车辆信息
                    </view>
                </view>
            </view>
            <view class="columnbox n-box">
                <view class="wdh-100 rowbox jus xsz-title">
                    <view style="margin-right: 10rpx;">行驶证正页</view>
                    <u-icon name="question-circle" size="32rpx"></u-icon>
                </view>
                <view class="rowbox add-csz">+</view>
            </view>
            <view class="wdh-100" style="height: 200rpx;"></view>
            <view class="rowbox bottom-box">
                <view class="rowbox pay-btn" @click="">提交</view>
            </view>
        </template>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                step: 1
            };
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        font-family: PingFang SC;
        background: #F7F7F7;
        min-height: 100vh;
        justify-content: flex-start;
    }

    .top-box {
        width: 710rpx;
        border-radius: 20rpx 20rpx 0 0;
        margin-top: 20rpx;
        padding: 20rpx 20rpx;
        background: #e7f1fa;
        padding-bottom: 40rpx;
    }

    .b-title {
        font-size: 32rpx;

        text {
            color: #1E72CA;
            margin-left: 20rpx;
        }
    }


    .one-s-box {
        font-size: 22rpx;
        color: #1E72CA;
        margin-top: 20rpx;
        margin-right: 10rpx;

        view {
            width: 32rpx;
            height: 32rpx;
            border-radius: 100rpx;
            margin-right: 10rpx;
            background-color: rgba(30, 114, 202, 0.15);
            color: #1E72CA;
            border: #1E72CA solid 1px;
        }
    }

    .grey-box {
        color: #6C6C6C;

        view {
            color: #6C6C6C;
            border: #b2b4b4 solid 1px;
            background-color: rgba(#6C6C6C, 0.15);
        }
    }

    .n-box {
        width: 710rpx;
        background: #fff;
        padding: 20rpx 20rpx;
        border-radius: 0 0 20rpx 20rpx;
    }

    .one-info {
        padding: 20rpx 0;
        font-size: 28rpx;

        input {
            background: #f7f7f7;
            font-size: 28rpx;
            padding: 20rpx 20rpx;
            border-radius: 10rpx;
            width: 500rpx
        }
    }

    .scan-box {
        background: #EFEFEF;
        padding: 20rpx 20rpx;
        margin-top: 32rpx;
        border-radius: 10rpx;
        font-size: 28rpx;
    }

    .bottom-box {
        position: fixed;
        bottom: 0;
        left: 0;
        background: #fff;
        padding: 20rpx 32rpx;
        padding-bottom: 40rpx;
        z-index: 9;
        border-top: #f2f5f5 solid 1px;
        width: 100%;
        justify-content: space-between;
    }

    .pay-btn {
        font-size: 28rpx;
        color: #fff;
        background: #1E72CA;
        border-radius: 10rpx;
        width: 100%;
        height: 90rpx;
    }

    .xsz-title {
        font-size: 28rpx;
    }

    .add-csz {
        background: #EFEFEF;
        width: 100%;
        margin-top: 20rpx;
        height: 290rpx;
        border-radius: 10rpx;
        font-size: 70rpx;
        color: #6C6C6C;
    }
</style>